<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import {watch} from 'vue';
import { useBiliStore } from '@/stores/bili';
import { startApp } from '@/apis/biliApi';
import {createSocket,destroySocket} from '@/utils/bili';
import { getMatches } from '@tauri-apps/api/cli';

const biliStore=useBiliStore();
watch(() => biliStore.code,(_val) =>{
  init();
})

const handleAppArgs=async () =>{
  const {args}=await getMatches();
  console.log('args:',args);
  for(let k in args){
    const v=<string>args[k].value;
    if(!v) continue;
    const arr=v.match(/^code=(.*)$/);
    if(!arr) continue;
    biliStore.code=arr[1];
  }
}
const init=async () =>{
  await handleAppArgs();
  await startApp();
  destroySocket();
  createSocket(biliStore.authBody,biliStore.wssLinks);
}
init();
</script>

<template>
  <div class="page-container h-full min-w-100 max-w-200 mx-auto">
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
@import '@/styles/base.scss';

html,body,#app{
  width: 100%;
  height: 100%;
  overflow: auto;
}
#app{
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #0f0f0f;
  background-color: #f6f6f6;
}
.scrollbar-thin{
  scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar{
  display: block;
  width: 8px;
  height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-thumb{
  background-color: rgba(0,0,0,.2);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
  border-radius: 5px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover{
  background-color: rgba(0,0,0,.4);
}
.scrollbar-thin::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: white;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
.scrollbar-thin::-webkit-scrollbar-track:hover{
  background-color: rgba(0,0,0,.01);
}
.scrollbar-none{
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar{
  display: none;
}
</style>
